<template>
  <div>
    <van-dialog
      v-model="isShowDialog"
      show-cancel-button
      :title="dialogTitle"
      :before-close="onCloseDialog"
      class="dialog-box"
      getContainer="body"
    >
      <div class="password-box">
        <van-cell-group class="cell-group">
          <van-field
            v-model="password"
            label="支付密码"
            size="large"
            type="password"
            placeholder="请输入支付密码"
            autofocus
            clearable
          />
        </van-cell-group>
        <div class="tip">由9-20个字母、数字、普通字符组成</div>
        <div class="forget-text">
          <span @click="isShowPopupPayPassword = true">忘记密码？</span>
        </div>
      </div>
    </van-dialog>
    <PopupSetPaymentPassword v-model="isShowPopupPayPassword" :load-data="loadData" />
  </div>
</template>

<script>
import { validPaymentPassword } from "@/utils/validator";
import PopupSetPaymentPassword from "./popup-set-pay-password/PopupSetPaymentPassword";
import { focusout } from "@/mixins";
export default {
  data() {
    return {
      password: "",
      isShowDialog: false,
      isShowPopupPayPassword: false
    };
  },
  props: {
    dialogTitle: {
      type: String,
      default: "请输入支付密码"
    },
    loadData: Function
  },
  mixins: [focusout],
  methods: {
    onClearPassword() {
      this.password = "";
    },
    onCloseDialog(action, done) {
      const $this = this;
      if (action === "confirm") {
        if (!validPaymentPassword($this.password)) {
          done(false);
          return false;
        }
        done();
        $this.$emit("confirm", $this.password);
      } else {
        done();
      }
    }
  },
  beforeDestroy() {
    this.isShowDialog = false;
    this.isShowPopupPayPassword = false;
  },
  deactivated() {
    this.isShowDialog = false;
    this.isShowPopupPayPassword = false;
  },
  components: {
    PopupSetPaymentPassword
  }
};
</script>

<style scoped>
.popup-pay-password {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.dialog-box {
  position: fixed;
  top: 50%;
  left: 50%;
}
.password-box {
  margin: 20px 0px 10px;
}

.tip {
  color: #909399;
  text-align: center;
  font-size: 12px;
  margin-top: 10px;
}

.van-toast {
  z-index: 2100 !important;
}

.forget-text {
  margin-top: 10px;
  font-size: 12px;
  text-align: center;
  color: #1989fa;
}
</style>
